<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.beans.CateInfo" %>
<%@ page import="com.dao.CateDao" %>
<%@ page import="java.util.List" %>
<%@ page import="com.dao.GoodsDao" %>
<%@ page import="com.beans.GoodsInfo" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/edittable.css"/>
    <link rel="stylesheet" type="text/css" href="css/validate.css"/>
    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="js/validate.js"></script>
    <script>
        $(function () {

            $("#pic_instead").hide();
            $("#picture").change(function () {
                $("#pic_instead").val(this.value);
            });

            $("#bigCateId").change(function () {
                if (this.value == "-1") {
                    $("#smallCateId").html("<option value='-1'>小分类</option>");
                    return;
                }
                $.ajax({
                    url: "CateServlet.do",
                    type: "POST",
                    async: false,
                    dataType: "json",
                    data: {bigcateid: this.value, flag: "listSmallcate"},
                    success: function (cateList) {
                        $("#smallCateId").empty();
                        $.each(cateList, function (key, cateInfo) {
                            var optionStr = "<option value='" + cateInfo.id + "'>" + cateInfo.cateName + "</option>";
                            $("#smallCateId").append(optionStr);
                        });
                    }
                });
                $("#bigCateId").change();
            });

            //验证用户名
            function validateGoodsName() {
                var result = true;
                var goodsName = $("#goodsName").val();
                var reg = /^\S{2,20}$/;   //2-20个非空字符
                if (!reg.test(goodsName)) {
                    result = false;
                    $("#goodsName_msg").removeClass().addClass("validate_error").html("用户名格式错误");
                }

                if (result == true) {
                    $("#goodsName_msg").removeClass().addClass("validate_ok").html("√");

                }
                return result;
            }

            //验证计量单位
            function validateUnit() {
                var result = true;
                var unit = $("#unit").val();
                var reg = /^\S{1,10}$/;   //1-10个非空字符
                if (!reg.test(unit)) {
                    result = false;
                    $("#unit_msg").removeClass().addClass("validate_error").html("计量单位格式不正确");
                }

                if (result == true) {
                    $("#unit_msg").removeClass().addClass("validate_ok").html("√");
                }
                return result;
            }

            //验证商品价格
            function validatePrice(item) {
                var result = true;
                var price = $("#price").val();
                if (price == "") {
                    result = false;
                    $("#price_msg").removeClass().addClass("validate_error").html("请添写商品价格");
                } else if (isNaN(price)) {
                    result = false;
                    $("#price_msg").removeClass().addClass("validate_error").html("商品价格格式不正确");
                } else if (price < 0) {
                    result = false;
                    $("#price_msg").removeClass().addClass("validate_error").html("难道这商品卖了还要倒找钱吗");
                }

                if (result == true) {
                    $("#price_msg").removeClass().addClass("validate_ok").html("√");
                }
                return result;
            };

            $("#goodsName").blur(function () {
                validateGoodsName();
            });
            $("#unit").blur(function () {
                validateUnit();
            });
            $("#price").blur(function () {
                validatePrice();
            });
            //总验证
            $("#form_btn").click(function () {
                var result = true;
                if (validateGoodsName() == false) {
                    result = false;
                }
                if (validateUnit() == false) {
                    result = false;
                }
                if (validatePrice() == false) {
                    result = false;
                }

                if (result == true) {
                    result = confirm('确定提交吗');
                }
                return result;

            });

        });
    </script>
    <style>
        /*模拟文件控件的文本框*/
        .file-box {
            position: relative;
            width: 320px
        }

        /*模拟文件控件的提交按钮*/
        .filebtn {
            background-color: #FFF;
            border: 1px solid #CDCDCD;
            height: 20px;
            width: 70px;
        }

        /*把真的文件控件藏起来*/
        .file {
            position: absolute;
            top: 0;
            right: 40px;
            filter: alpha(opacity:0);
            opacity: 0;
            width: 280px;
            height: 30px;
        }

        label {
            margin-left: 10px;
        }
    </style>

    <script type="text/javascript">
        function setImagePreview(docObj, localImagId, imgObjPreview, width, height) {
            if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = width;
                imgObjPreview.style.height = height;
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            } else { //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                //必须设置初始大小
                localImagId.style.width = width;
                localImagId.style.height = height;
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
    </script>
</head>
<body>
<%
    Integer goodsId = Integer.parseInt(request.getParameter("goodsId"));
    GoodsInfo goods = new GoodsDao().getGoodsById(goodsId);
    request.setAttribute("goods", goods);

%>
<div class="div_title">
    <div class="div_titlename"><img src="images/san_jiao.gif"><span>商品管理  商品信息修改</span></div>
</div>
<form action="GoodsServlet.do?flag=update" method="post" name="form1" enctype="multipart/form-data">
    <input type="hidden" name="goodsId" value="${goods.id}">
    <table class="edit_table">
        <tr>
            <td class="td_info">商品名称:</td>
            <td class="td_input">
                <input type="text" class="txtbox" id="goodsName" name="goodsName" value="${goods.goodsName}"/>
                <label class="validate_info" id="goodsName_msg">2-20位非空白字符</label>
            </td>
            <td></td>

        </tr>
        <tr>
            <%
                List<CateInfo> cateList = new CateDao().getCateList(0);
                request.setAttribute("cateList", cateList);
            %>
            <td class="td_info">所属分类</td>
            <td>
                <select name="bigCateId" id="bigCateId">
                    <option value="-1">-所属大分类-</option>
                    <c:forEach var="cate" items="${cateList}">
                        <option value="${cate.id }"
                                <c:if test="${cate.id==goods.bigCateId}">selected</c:if> >${cate.cateName }</option>
                    </c:forEach>
                </select>
                <select id="smallCateId" name="smallCateId">
                    <option value="-1">-所属小分类-</option>
                </select>
                <label class="validate_info" id="password_msg">请指定商品所属的分类</label>
                <script>
                    $("#bigCateId").change();
                </script>
            </td>
            <td></td>
        </tr>
        <tr>
            <td class="td_info">计量单位</td>
            <td><input type="text" class="txtbox" id="unit" name="unit" value="${goods.unit }"/>
                <label class="validate_info" id="unit_msg">1-10个非空字符</label>
            </td>
            <td></td>

        </tr>
        <tr>
            <td class="td_info">商品价格</td>
            <td><input type="text" class="txtbox" id="price" name="price" value="${goods.price }"/>
                <label class="validate_info" id="price_msg">不能为空,以元为单位,可以是小数</label>
            </td>
            <td></td>

        </tr>

        <tr>
            <td class="td_info">生产厂商</td>
            <td><input type="text" class="txtbox" id="producter" name="producter" value="${goods.producter }"/>
                <label class="validate_info" id="producter_msg"></label></td>
            <td></td>
        </tr>

        <tr>
            <td class="td_info">商品图片</td>
            <td>
                <div class="file-box">

                    <input type='text' name='pic_instead' id='pic_instead' class='txtbox'/>
                    <input type='button' class='filebtn' value='找找...'/>
                    <input type="file" name="picture" class="file" id="picture" size="28"
                           onchange="setImagePreview(this,localImag,preview,'100px','125px');"/>
                </div>
                <div id="localImag" style="margin-left: 24px"></div>
                <img id="preview" alt="请上传图片" src="goods/picture.jsp?goodsId=${goods.id}"/>
                <label class="validate_info" id="picture_msg"></label>
            </td>
            <td></td>
        </tr>

        <tr>
            <td class="td_info">备注信息:</td>
            <td><textarea rows="4" cols="27" name="des" class="txtarea">${goods.des }</textarea></td>
            <td></td>
        </tr>
        <tr>
            <td class="td_info"></td>
            <td>
                <input class="form_btn" type="submit" value="提交"/>
                <button id="btnreset" class="form_btn">重置</button>
                <label id="result_msg" class="result_msg">${msg}</label>
            </td>
            <td></td>
        </tr>
    </table>
</form>
</body>
</html>
